<template>
    <div class="home">
        <el-container>
            <el-header>
                <Head></Head>
            </el-header>
            <el-container>
                <!-- 故意给宽度留空 -->
                <el-aside width>
                    <Nav></Nav>
                </el-aside>
                <el-container>
                    <el-main>
                        <router-view></router-view>
                    </el-main>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<script>
// @ is an alias to /src
import Nav from "@/components/Nav";
import Head from '@/views/common/Head';

export default {
    name: "HomeView",
    data() {
        return {};
    },
    components: {
        Nav, Head
    },
    created() {

    }
};
</script>
<style>
.el-header,
.el-footer {
    background-color: #b3c0d1;
    color: #333;
    text-align: center;
    line-height: 60px;
}

.el-aside {
    background-color: #d3dce6;
    color: #333;
    text-align: center;
    line-height: 200px;
    overflow: visible;
}

.el-main {
    position: relative;
    background-color: #e9eef3;
    color: #333;
    height: 100vh;
}

body > .el-container {
    margin-bottom: 40px;
}

/* 清除默认样式 */
body {
    padding: 0;
    margin: 0;
}
</style>
